<template>


  <div class="app-container" style="margin-left: 200px">
    <el-container>
      <el-row class="tac">
        <el-col :span="24">
          <el-menu
            ref="menus"
            default-active="4"
            class="el-menu-vertical-demo">


            <el-menu-item index="1" @click="to('/ucenter/myinfo')">
              <i class="el-icon-location"></i>
              <span slot="title">个人编辑</span>
            </el-menu-item>

            <el-menu-item index="2" @click="to('/ucenter/editpass')" >
              <i class="el-icon-menu"></i>
              <span slot="title">修改密码</span>
            </el-menu-item>


            <el-menu-item index="3" @click="to('/ucenter/myorder')">

              <i class="el-icon-setting"></i>
              <span slot="title">我的订单</span>

            </el-menu-item>
            <el-menu-item index="4" @click="to('/ucenter/mycomment')">
              <i class="el-icon-document"></i>
              <span slot="title">我的评论</span>
            </el-menu-item>

          </el-menu>
        </el-col>
      </el-row>
      <el-main >

        <div>
          <template>
            <el-table
              :data="tableData"
              border
              style="width: 100%">
              <el-table-column prop="courseTitle" label="课程标题">
                <template slot-scope="scope">
                  <a :href="'/course/'+scope.row.courseId" target="_blank" >
                    {{scope.row.courseTitle}}
                  </a>
                </template>
              </el-table-column>
              <el-table-column  label="评价内容">
                <template slot-scope="scope">
                  {{ scope.row.content }}
                </template>
              </el-table-column>

              <el-table-column prop="eduCreate" label="评价时间"/>

              <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                  <el-button  @click="del(scope.row.id)" type="danger" size="small">删除

                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-pagination
              :page-count="page.pages"
              @current-change="handleCurrentChange"
              background
              layout="prev, pager, next">
            </el-pagination>
          </template>

        </div>
      </el-main>
    </el-container>

  </div>

</template>

<script>
import commentApi from '@/api/comment'
export default {
  name: "ucenter",
  data() {
    return {
      tableData: [],
      page: {
        total: 0,
        pageSize: 4,
        pageNum: 1,
        pages: 0,
      },
    }
  },
  created() {
    this.getTableList()
  },

  methods: {

    del(id){
      commentApi.delComment(id).then((res) => {
        this.$message({
          message: '删除成功',
          type:'success'
        });
        this.getTableList()
      })
    },

    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableList();
    },
    to(router){
      this.$router.push({
        path: router
      })
    },
    getTableList() {
      commentApi.myComment( this.page).then((res) => {
        console.log(res.data)
        this.tableData = res.data.records
        this.page.total = res.data.total
        this.page.pages = res.data.pages
        this.page.pageSize = res.data.size
      })
    },


  }

}
</script>

<style scoped>

</style>
